﻿﻿<link rel="stylesheet" type="text/css" href="~/Content/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="~/Scripts/jquery-fileupload/jquery.fileupload-ui.css" />
<link rel="stylesheet" href="~/JqueryTreeview/jquery.treeview.css" />

@model  Vms.Web.Models.LIB_CONTENT

@{
    List<Vms.Web.Models.LIB_CONTENT> lib_contents = ViewBag.Lib_Contents;

    string txt = "";
    string action = "CreateContent";
    if (Model.Id != 0)
    {
        txt = Model.LIB_CONTENT_TXT.First().Txt;  
        action = "EditContent";
    } 
  }

@section scripts
{

 <script type="text/javascript">
     function showMessage(msg) {
         $("#message").text(msg);
         $("#message").show(100);
         $("#message").delay(1200);
         $("#message").hide(100);
     }

     function updateSuccess(id, msg) {
         var txt = $("#Name").val();
         $("#content_"+id).text(txt);
         showMessage(msg);
     }
 </script>

 <script type="text/javascript">
     // Numeric only control handler
     jQuery.fn.ForceNumericOnly =
    function () {
        return this.each(function () {
            $(this).keydown(function (e) {
                var key = e.charCode || e.keyCode || 0;
                // allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
                return (
                    key == 8 ||
                    key == 9 ||
                    key == 46 ||
                    (key >= 37 && key <= 40) ||
                    (key >= 48 && key <= 57) ||
                    (key >= 96 && key <= 105));
            });
        });
    };

     // Text Input Change value
     jQuery.fn.TextInputChangeValue =
    function (targetId, attr, param) {
        if (attr != null) {
            return this.each(function () {
                $(this).keyup(function () {
                    var size = $(this).val() + param;
                    $(targetId).css(attr, size)
                    ;
                });
                $(this).blur(function () {
                    var size = $(this).val() + param;
                    $(targetId).css(attr, size);
                });
            });
        }
        else {
            return this.each(function () {
                $(this).keyup(function () {
                    var txt = $(this).val();
                    $(targetId).text(txt);
                });
                $(this).blur(function () {
                    var txt = $(this).val();
                    $(targetId).text(txt);
                });
            });
        }
    };

     // Checkbox Change value
     jQuery.fn.CheckboxChangeValue =
    function (targetId, attr, value1, value2) {
        return this.each(function () {
            $(this).change(function () {
                var value = ($(this).is(':checked')) ? value1 : value2;
                $(targetId).css(attr, value);
            });
        });
    };

     // Select option Change value
     jQuery.fn.SelectOptionChangeValue =
    function (targetId, isValue, attr, param) {
        if (param == null)
            param = "";
        return this.each(function () {
            $(this).change(function () {
                var value = (isValue == true) ? $(this).find(":selected").val() : $(this).find(":selected").text();
                $(targetId).css(attr, value + param);
            });
        });
    };

 </script>
<!-- Scrip screen view -->
<script type="text/javascript">
    $(function () {
        // Text input Only numberic
        $("#FontSize").ForceNumericOnly();
        $("#Txt_x").ForceNumericOnly();
        $("#Txt_y").ForceNumericOnly();
        $("#Txt_Width").ForceNumericOnly();
        $("#Txt_Height").ForceNumericOnly();
        $("#Img_x").ForceNumericOnly();
        $("#Img_y").ForceNumericOnly();
        $("#Img_Width").ForceNumericOnly();
        $("#Img_Height").ForceNumericOnly();

        // Handler when text input change value.
        $("#FontSize").TextInputChangeValue("#content_txt", "font-size", "px");
        $("#Txt").TextInputChangeValue("#content_txt");
        $("#Txt_x").TextInputChangeValue("#dragThisText", "left", "px");
        $("#Txt_y").TextInputChangeValue("#dragThisText", "top", "px");
        $("#Txt_Width").TextInputChangeValue("#dragThisText", "width", "px");
        $("#Txt_Height").TextInputChangeValue("#dragThisText", "height", "px");

        $("#Img_x").TextInputChangeValue("#dragThisImg", "left", "px");
        $("#Img_y").TextInputChangeValue("#dragThisImg", "top", "px");
        $("#Img_Width").TextInputChangeValue("#dragThisImg", "width", "px");
        $("#Img_Height").TextInputChangeValue("#dragThisImg", "height", "px");
        // Update font
        $("#Bold").CheckboxChangeValue("#content_txt", "font-weight", "bold", "normal");
        $("#FontColor").SelectOptionChangeValue("#content_txt", false, "color");
        $("#FontName").SelectOptionChangeValue("#content_txt", true, "font-family");

        // Init Screen
        var currentScreenWidth = $('#currentScreen_width').attr('value');
        var currentScreenHeight = $('#currentScreen_height').attr('value');
        $('#screenContainer').css("width", '' + currentScreenWidth + 'px');
        $('#screenContainer').css("height", '' + currentScreenHeight + 'px');
        // Init Image
        var imgUrl = '/Areas/Lib/Lib_Data/Imgs/' + $('#ImgFileName').attr('value');
        var imgWidth = $('#Img_Width').attr('value');
        var imgHeight = $('#Img_Height').attr('value');
        var imgX = $('#Img_x').attr('value');
        var imgY = $('#Img_y').attr('value');

        $('#dragThisImg').css("background", 'url(' + imgUrl + ') no-repeat');
        $('#dragThisImg').css("background-size", imgWidth + 'px ' + imgHeight + 'px');
        $('#dragThisImg').css("width", '' + imgWidth + 'px');
        $('#dragThisImg').css("height", '' + imgHeight + 'px');
        $('#dragThisImg').css("left", '' + imgX + 'px');
        $('#dragThisImg').css("top", '' + imgY + 'px');


        // init Text
        var txtWidth = $('#Txt_Width').attr('value');
        var txtHeight = $('#Txt_Height').attr('value');
        var txtX = $('#Txt_x').attr('value');
        var txtY = $('#Txt_y').attr('value');
        var txt_font_family = $('#FontName').attr('value');
        var txt_font_color = $("#FontColor option:selected").text();

        $('#dragThisText').css("width", '' + txtWidth + 'px');
        $('#dragThisText').css("height", '' + txtHeight + 'px');
        $('#dragThisText').css("left", '' + txtX + 'px');
        $('#dragThisText').css("top", '' + txtY + 'px');
        //font-weight
        if ($("#Bold").is(':checked')) {
            $("#content_txt").css("font-weight", "bold");
        }
        else {
            $("#content_txt").css("font-weight", "normal");
        }
        //font-family
        $("#content_txt").css("font-family", txt_font_family);
        //font-color
        $("#content_txt").css("color", txt_font_color);

        //alert(txtY);
        $("#dragThisImg").resizable({
            maxHeight: 250,
            maxWidth: 350,
            minHeight: 10,
            minWidth: 10,
            resize: function (event, ui) {

                var w = $(this).width();
                var h = $(this).height();


                $("#Img_Width").val($(this).width());
                $("#Img_Height").val($(this).height());
                $('#dragThisImg').css("background-size", '' + w + 'px' + ' ' + h + 'px');


                var w = $(this).width();
                var h = $(this).height();
                $("#img_width").val($(this).width());
                $("#img_height").val($(this).height());
                $('#dragThisImg').css("background-size", '' + w + 'px' + ' ' + h + 'px');

            }
        });
        $("#dragThisImg").draggable({ containment: "parent",
            drag: function (event, ui) {
                var top = $(this).position().top;
                var left = $(this).position().left;
                $("#Img_x").val(left);
                $("#Img_y").val(top);
                $("#Img_Width").val($(this).width());
                $("#Img_Height").val($(this).height());

                $("#img_x").val(left);
                $("#img_yy").val(top);
                $("#width").val($(this).width());
                $("#height").val($(this).height());

            }
        });
        $("#dragThisText").resizable({
            maxHeight: 250,
            maxWidth: 350,
            minHeight: 10,
            minWidth: 10,
            resize: function (event, ui) {
                $("#Txt_Width").val($(this).width());
                $("#Txt_Height").val($(this).height());
            }
        });
        $("#dragThisText").draggable({ containment: "parent",
            drag: function (event, ui) {
                var top = $(this).position().top;
                var left = $(this).position().left;
                $("#Txt_x").val(left);
                $("#Txt_y").val(top);
                $("#Txt_Width").val($(this).width());
                $("#Txt_Height").val($(this).height());
            }
        });

    });

</script>

<!-- scrip SELECT IMGS-------------------------------------------------------------------->
<script type="text/javascript">
    $(document).ready(function () {

        $("#btnCreate").click(function () {
            InitializeDialog($("#departmentdialog"));

            $("#departmentdialog").dialog("open");
        });

        //Method to Initialize the DialogBox
        function InitializeDialog($element) {

            $element.dialog({
                autoOpen: false,
                width: 200,
                height: 600,
                resizable: true,
                draggable: true,
                title: "Choose An Image",
                model: true,
                show: 'slide',
                closeText: 'x',
                dialogClass: 'alert',
                closeOnEscape: true,
                open: function (event, ui) {
                    //Load the Partial View Here using Controller and Action
                    $element.load('/ContentProgram/LibImage');

                },


                close: function () {
                    $(this).dialog('close');
                }

            });
            //$("#departmentdialog").dialog({ buttons: [{ text: "Ok", click: function () { $(this).dialog("close"); } }] });

        }
        // select img in dialog text
        $("#departmentdialog .spanDialog").live('click', function () {
            var valueImg = $(this).closest('tr').children('td:first').children('img').attr('alt');
            //alert(valueImg);
            var imgUrl = '/Areas/Lib/Lib_Data/Imgs/' + valueImg;
            $('#dragThisImg').css("background", 'url(' + imgUrl + ') no-repeat');
            $("#ImgFileName").val(valueImg);
            var imgWidth = $('#Img_Width').attr('value');
            var imgHeight = $('#Img_Height').attr('value');
            $('#dragThisImg').css("background-size", imgWidth + 'px ' + imgHeight + 'px');
            //$(this).parent();
            //alert($("td:first").attr('alt'));
            //alert($(this).html());
            $("#departmentdialog").dialog("close");
        });

    });
</script> 

}


<!-- CSS scream view -->

<style >

#leftsidebar
{
    width: 135px;
    float: left;
}
#rightcontent
{
    width: 790px;
    float: right;
    border: 1px solid #DDDDDD;
    background-color: #fff;

}
#screenContainer
{
    position: relative;
    background-color: #333333; 
    margin: 20px auto;
    height: 150px;
    width: 750px;    
}

#dragThisImg
{
    width:  60px;
    height: 60px;
    border: 1px solid #ccc;       
    background: url('/Areas/Lib/Lib_Data/Imgs') no-repeat;
}
#dragThisText
{
    width: 400px;
    height: 40px;
    border: 1px solid #ccc;

}
#dragThisText label
{
    font-family: Tahoma;
    font-weight: bold;
    font-size:   20px;
    line-height: 30px;   
    color: Red;
}

#contentContainer
{
    margin:10px;
    padding-top:10px;
}
#contentContainer input
{
    width: 80px;
}
#contentContainer select
{
    width: 90px;
}
#contentContainer input[type=checkbox]
{
    width: auto;
}
.program-form  
{
    padding: 10px;
}
.program-form  .editor-label
{
    float: left;
    padding-top: 5px;
    text-align: right;
    width: 80px;
}
.program-form  .editor-field
{
    margin-left: 90px;
}
.program-form legend {
    font-size: 12px;
    font-weight: bold;
    margin-top: -5px;
    margin-bottom:0px;
    width:auto;
    border: none;
    line-height:normal;
   
}
.program-form fieldset {
    border: 1px solid #DDDDDD;
    margin: 10px 0 1.5em;
    padding: 10px 10px;
}
.program-form span
{
    width: 80px;
    display:block;
    float:left;
}
.btn-bar
{
    margin: 10px;
    text-align: center;
}
#view2_img1
{
    width: 280px;
    height: auto;
    padding: 10px;
    float:left;
    border-right: 1px solid #B7B7B7;

}
#view2_txt1
{

    width: 435px;
    height: auto;
    padding: 10px;
    float:right;
    margin-right: 10px;

}
#view2_img1 td, #view2_txt1 td
{
    width: 90px;
}
.content-form input
{
    width:80px;    
}
.content-form select
{
    width:90px;    
}
.content-form tr > td:first-child
{
    text-align: right;
    width: 100px;
    padding-right:5px;
}

/* Tab Content Css */
ul.tabs
{
    margin: 0 0 3px 0;
    list-style-type: none;
}
        
ul.tabs li
{
    display: inline;
    margin: 0;
    margin-right:3px; /*distance between tabs*/
}
        
ul.tabs li a
{
    font: normal 12px Verdana;
    text-decoration: none;
    position: relative;
    z-index: 1;
    padding: 5px 16px;
    border: 1px solid #CCC;
    border-bottom-color:#B7B7B7;
    color: #000;
    background: white;
    border-radius: 2px 2px 0 0;
    outline:none;
}
ul.tabs li a:visited
{
    color: #000;
}
        
ul.tabs li a:hover
{
    border: 1px solid #B7B7B7;
    background:#F0F0F0 url(tabbg.gif) 0 -36px repeat-x;
}
        
ul.tabs li.selected a
{
    /*selected tab style */
    position: relative;
    font-weight:bold;
    
    background-color: #F5F5F5;
    border: 1px solid #B7B7B7;
    border-bottom-color: #F5F5F5;
}
div.tabcontents
{
    width: auto;
    border: 1px solid #B7B7B7;
    background-color: #F5F5F5;
    border-radius: 0 2px 2px 2px;
}

.bs-docs-sidenav {
    background-color: #FFFFFF;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    margin: 000px 0 0;
    padding: 0;
    width: 133px;
    position:fixed;
}
.bs-docs-sidenav > li > a {
}
.bs-docs-sidenav > li > a {
    border: 1px solid #E5E5E5;
    display: block;
    margin: 0 0 -1px;
    padding: 8px 14px;
}

/* HaiPV css for message */
#message 
{
    color: Red;
    font-weight: bold;
    font-size: large;
    text-align: center;
    
}
</style>


<div id="content_program">
    <div id="leftsidebar">
         <ul id="browser" class="filetree">
         <li><span class="folder"><b>@Html.ActionLink("Contents", "Index")</b></span>
            <ul>
             @foreach (var lib_content in lib_contents)
             {
                 <li>
                
                    <span class="file" >@Html.ActionLink(" " +lib_content.Name, "Index", new { contentId = lib_content.Id }, new { @id  = "content_"+lib_content.Id})</span>
                 
                 </li>
             }
             </ul>
             </li>
        </ul>
        
    </div>
    <div id="rightcontent">
        <div id="screenContainer">
        
            <!-- demo drag imgs Tung: 28/3/2013 -->
            
            <div id="dragThisText">
                <label id="content_txt">@txt</label>
            </div>
            <div>
            </div>
            <div id="dragThisImg" >
               
            </div>
            
            
        </div>
        <div id="message">
            
        </div>
        <div id="contentContainer">
                <ul class="tabs" persist="true">
                    <li><a href="#" rel="view2">Content</a></li>
                </ul>
                <div class="tabcontents">
              
                    <!-- Content txt & igms content-------------------------------------------------->
                    <div id="view2" class="tabcontent">
                        

                            @using (Ajax.BeginForm(action, "Content", new AjaxOptions
                            {
                                InsertionMode = InsertionMode.Replace,
                                HttpMethod = "POST",
                                OnComplete = "showMessage('Update Successful!')",
                                OnFailure = "showMessage('Update Failure!')"
                            }))
                            {
                                @Html.Hidden("Content_Id", Model.Id)
                                <div style="    margin-top: 10px;    margin-left: 23px;">
                                    <span>Content Name</span> @Html.TextBox("Content_Name", Model.Name, new { style = "width: 368px;" })
                                </div>
                                
                                @Html.Partial("_EditImage", Model.LIB_CONTENT_IMG.First());
                                @Html.Partial("_EditText", Model.LIB_CONTENT_TXT.First());
                                <input type="submit" class="btn btn-primary" value="Save" style="margin-top: 10px; margin-left: 130px;"/>
                                @Html.ActionLink("Cancel", "Index", null, new { @class = "btn btn-primary" , style="display: block;width: 40px;margin-left: 365px;" })
                                @Html.ActionLink("Delete", "Index", null, new { @class = "btn btn-primary", style="margin-left: 297px; margin-top: -45px;" })
                            }
                        
                        <div class="clearfix"></div>
                                  
    
                    </div><!-- End div#view 2 : Content txt & igms content -->
                </div>  
        </div> <!-- end contenContainer -->
    </div>
    <div class="clearfix"></div>
</div>

